<template>
  <div class="common-editor-view" :style="{fontSize: `${defaultSize}px`}" ref="editor"></div>
</template>

<script>
import Quill from 'quill'
import 'quill/dist/quill.snow.css'

export default {
  name: 'EditorView',
  props: {
    /* 编辑器的内容 */
    value: {
      type: String,
      default: ''
    },
    defaultSize:{
      type: String,
      default: ''
    }
  },
  data() {
    return {

      Quill: null,
      currentValue: '',
      options: {
        theme: 'snow',
        bounds: document.body,
        readOnly: true,
        modules: {
          // 工具栏配置
          toolbar: false
        }
      }
    }
  },

  watch: {
    value: {
      handler(val) {
        if (val !== this.currentValue) {
          this.currentValue = val === null ? '' : val
          if (this.Quill) {
            this.Quill.pasteHTML(this.currentValue)
          }
        }
      },
      immediate: true
    }
  },
  mounted() {
    this.init()
  },
  beforeDestroy() {
    this.Quill = null
  },
  methods: {
    init() {
      const editor = this.$refs.editor
      this.Quill = new Quill(editor, this.options)
      this.Quill.pasteHTML(this.currentValue)
    }
  }
}
</script>

<style lang="scss" scoped>
.common-editor-view {
  border: none !important;
  font-size: 12px;
  white-space: pre-wrap !important;
  line-height: normal !important;
}
</style>
